<template>
	<view class="sale-rule-container">
		<u-navbar :border-bottom="false" title="销售规则" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}">
		</u-navbar>
		<view v-if="!saleRuleLoading" style="overflow: hidden;">
			<view class="rule-item" v-for="(item,index) in saleWaitRuleList" :key="item.id">
				<view class="rule-item-title">{{saleWaitRuleTextH[index]}}</view>
				<view class="u-flex u-m-t-20">
					<u-input v-model="item.day" @input="initTimeFn(index)" :type="'number'" placeholder="XX"  :placeholderStyle="'fontSize:24rpx;color:#ccc;'" 
					  :input-align="'center'" :border="true" border-color="#999" :clearable="false" class="date-input"/>
					<text class="u-font-28 u-m-l-10 u-m-r-10">天</text>
					<u-input v-model="item.hour"  @input="initTimeFn(index)" :type="'number'" placeholder="XX" :placeholderStyle="'fontSize:24rpx;color:#ccc;'" 
					  :input-align="'center'" :border="true" border-color="#999" :clearable="false" class="date-input"/>
					<text class="u-font-28 u-m-l-10 u-m-r-10">小时</text>
					<u-input v-model="item.minute"  @input="initTimeFn(index)" :type="'number'" placeholder="XX" :placeholderStyle="'fontSize:24rpx;color:#ccc;'" 
					  :input-align="'center'" :border="true" border-color="#999" :clearable="false" class="date-input"/>
					<text class="u-font-28 u-m-l-10 ">分钟{{saleWaitRuleTextF[index]}}</text>
				</view>
			</view>
			<view class="rule-item">
				<view class="rule-item-title">先货后款超额下单策略</view>
				<view class="u-flex u-m-t-40 u-row-between">
					<text class="u-font-30">采购商不能下单</text>
					<u-switch v-model="saleRuleData.buyerCantTradeExcess" size="42" active-color="#FFBB1A" inactive-color="#ccc"></u-switch>
				</view>
			</view>
			<view class="rule-item">
				<view class="rule-item-title">库存扣减策略（单选）</view>
				<u-radio-group v-model="saleRuleData.deductInventoryStatus" :wrap="true" style="width: 100%;" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
					<view class="u-flex u-row-between u-p-t-40 u-p-b-40 check-item" style="width: 100%;" v-for="(item, index) in inventoryStatusList" :key="index" >
						<view class="" style="flex:1">
							{{item.name}}
						</view>
						<u-radio
							:name="item.status"
							class="choose-radio"
						>
						</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="rule-item">
				<view class="rule-item-title">活动最大折扣额</view>
				<view class="u-flex u-m-t-40 u-row-between">
					<u-input v-model="saleRuleData.maxDiscount" @input="persentInput" :type="'number'" placeholder="输入折扣百分比(1-100)"  :placeholderStyle="'fontSize:24rpx;color:#ccc;'"
					:border="false" :clearable="false" />
					<text class="u-font-30">%</text>
				</view>
			</view>
			
			<view class="u-flex u-p-l-35 u-p-r-35" style="margin: 100rpx 0 50rpx;">
				<u-button class="u-m-r-20" shape="circle" :plain="true" @click="cancelShow= true;" :custom-style="cancelBtnStyle" hover-class="none">取消</u-button>
				<u-button shape="circle" :hair-line="false" @click="saveRuleFn()" :custom-style="confirmBtnStyle" hover-class="none">保存</u-button>
			</view>
		</view>
		<view class="u-flex u-row-center" style="height: 500rpx;"  v-if="saleRuleLoading">
			<u-loading mode="circle" size="48" color="#ff551a"  ></u-loading>
		</view>
		<u-modal v-model="cancelShow" :content="'您确定放弃此次编辑吗？'" @confirm="goBack()"></u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				cancelShow:false,
				cancelBtnStyle:{
					background:'#f8f8f8',
					flex:1,
					borderRadius:'45rpx',
					fontSize:'30rpx',
					fontWeight:400
				},
				confirmBtnStyle:{
					background:'#ffbb1a',
					border:'none',
					flex:1,
					fontSize:'30rpx',
					fontWeight:400
				},
				saleRuleLoading:false,
				saleRuleData:{
					deductInventoryStatus:0,
				},
				saleWaitRuleList:[],
				saleWaitRuleTextH:['待确认订单','待发货订单','待收货订单','待评价订单','未付款收款单'],
				saleWaitRuleTextF:['后自动取消订单','后自动提醒','后自动收货','后自动完成订单','后自动取消收款单'],
				shopId:'',
				inventoryStatusList:[
					{
						name:'下单时',
						status:0,
					},
					{
						name:'确认订单时（有超卖风险）',
						status:1,
					},
					{
						name:'发货时（有超卖风险）',
						status:2,
					}
				]
			}
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.getSaleRuleFn();
		},
		methods:{
			goBack(){
				uni.navigateBack();
			},
			// 百分比输入事件 最大值100 最小值1
			persentInput(val){
				let data = Number(val);
				if(data>100){
					data = 100;
				}
				if(data<1){
					data=1;
				}
				this.$nextTick(()=>{
					this.saleRuleData.maxDiscount = data;
				})
			},
			// 时间改变的时候，格式化一下时间	
			initTimeFn(index){
				let initMinute = Number(this.saleWaitRuleList[index].day)*24*60+Number(this.saleWaitRuleList[index].hour)*60+Number(this.saleWaitRuleList[index].minute);
				console.log(initMinute);
				this.$set(this.saleWaitRuleList[index],'day', parseInt(initMinute/60/24));
				this.$set(this.saleWaitRuleList[index],'hour', parseInt(initMinute/60%24));
				this.$set(this.saleWaitRuleList[index],'minute', parseInt(initMinute % 60));
			},
			// 格式化时间数据，分钟--->xx天xx小时xx分钟
			initWaitDate(initMinute){
				return {
					day:parseInt(initMinute/60/24),
					hour:parseInt(initMinute/60%24),
					minute:parseInt(initMinute % 60),
					id:this.$u.guid()
				}
			},
			// 保存销售规则
			async saveRuleFn(){
				this.saleRuleLoading = true;
				this.saleRuleData.tradeWaitComfirmTimeoutMinutes = this.saleWaitRuleList[0].day*24*60+this.saleWaitRuleList[0].hour*60+this.saleWaitRuleList[0].minute;
				this.saleRuleData.tradeWaitDeliverTimeoutMinutes = this.saleWaitRuleList[1].day*24*60+this.saleWaitRuleList[0].hour*60+this.saleWaitRuleList[1].minute;
				this.saleRuleData.tradeWaitRateTimeoutMinutes = this.saleWaitRuleList[2].day*24*60+this.saleWaitRuleList[0].hour*60+this.saleWaitRuleList[2].minute;
				this.saleRuleData.tradeWaitReceiveTimeoutMinutes = this.saleWaitRuleList[3].day*24*60+this.saleWaitRuleList[0].hour*60+this.saleWaitRuleList[3].minute;
				this.saleRuleData.paymentWaitPayTimeoutMinutes = this.saleWaitRuleList[4].day*24*60+this.saleWaitRuleList[0].hour*60+this.saleWaitRuleList[4].minute;
				this.saleRuleData.shopId = this.shopId;
				const res = await this.$setHttp.put('api/v1.2/Seller/SaveSaleRule', this.saleRuleData,{ header:{shopId:this.shopId} });
				this.saleRuleLoading = false;
				if(res.code === 200){
					this.$u.toast('保存销售规则成功~');
					this.getSaleRuleFn();
				}else{
					this.$u.toast('保存销售规则失败，错误信息：'+res.erroMessage);
				}
			},
			// 获取销售规则
			async getSaleRuleFn(){
				this.saleRuleLoading=true;
				const res = await this.$setHttp.get('api/v1.2/Seller/GetSaleRule', { header:{shopId:this.shopId} });
				this.saleRuleLoading=false;
				if(res.code === 200){
					this.saleRuleData = res.data;
					let ary = [
						res.data.tradeWaitComfirmTimeoutMinutes,
						res.data.tradeWaitDeliverTimeoutMinutes,
						res.data.tradeWaitRateTimeoutMinutes,
						res.data.tradeWaitReceiveTimeoutMinutes,
						res.data.paymentWaitPayTimeoutMinutes
					];
					let initWait = [];
					ary.forEach(item=>{
						initWait.push(this.initWaitDate(item))
					});
					this.saleWaitRuleList = initWait;
				}else{
					this.$u.toast('获取销售规则失败，错误信息：'+res.erroMessage);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sale-rule-container{
		.rule-item{
			box-sizing: border-box;
			padding: 28rpx 35rpx 30rpx 35rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.rule-item-title{
				font-size: 32rpx;
				font-weight: 500;
			}
			.date-input{
				width: 88rpx;
				height: 50rpx;
				flex: inherit;
				::v-deep .u-input__input{
					min-height: 50rpx !important;
					font-size: 28rpx;
				}
			}
			.check-item{
				border-bottom:1px solid #E5E5E5;
				&:nth-last-of-type(1){
					border: none;
				}
				.choose-radio{
					flex: 0 0 50rpx !important;
					width: 50rpx !important;
				}
			}
		}
	}
</style>